/* eslint-disable default-case */
/* eslint-disable jsx-a11y/iframe-has-title */
import React,{useEffect} from 'react'

import './App.css';

function App() {

  const [pageContent,setPageContent] = React.useState('二次开发页面初始值')
  const [number,setNumber] = React.useState(0)

  // mapBox容器样式
  let divStyle = {
    width: '360px', 
    height: '822px',
    border: 'none',
    overflow: 'hidden'
  };

  window.onmessage = (mData) => {
    const {data:{dataPool}} = mData
    if(dataPool){
      const {tabs} = dataPool
      switch(tabs){
        case 1:
          setPageContent('选择了第一个页签')
          break;
        case 2:
          setPageContent('选择了第二个页签')
          break;
        case 3:
          setPageContent('选择了第三个页签')
          break;
      }
    }
   
  };
  function addNumber(){
    let newNumber = number + 1;
    if(newNumber > 9) newNumber = 1
    setNumber(newNumber)
    
  }

  useEffect(()=>{
    window.frames['monetFrame'].contentWindow.postMessage({
      type:'setDataPool',
      mapper: "type",
      value: number
    }, '*');
  },[number])

  return (
    <>
      <div className="App">
        <div className="Title">莫奈大屏</div>
        <div className="Box">
          {/* <iframe id="monetFrame" src="https://imonet.jd.com/#/screen?key=1e7b25764a284821abc46f705d6ad26a" style={divStyle} ></iframe> */}
          <iframe id="monetFrame" src="http://localhost:8080/#/screen?key=e479cf00d7c2494b9563109a510126b8" style={divStyle} ></iframe>
        </div>
      </div>
      <div className="App-1">
        <div className="Title">二次开发页面</div>
        <div className="Box">
          <div className="Content">
            {pageContent}
            <div style={{ marginTop:'10px' ,backgroundColor:"rgba(244, 164, 96, 0.5)",borderRadius:"5px",cursor:"pointer",userSelect:"none"}} 
                 onClick={addNumber}>
                向monet注入变量<br/>
                {number}
            </div>
          </div>
          
        </div>
      </div>
     

    </>
  );
}

export default App;
